<template>
	<view class="content shoujiclass bg_white">
		<view class="newinput-group2"  v-if="chphoneInfo.passwordchanger">
			<view class="banner">
				<image class="w100" src="../../static/img/banner.jpg" mode="widthFix"></image>
			</view>
			<view class="tCenter f16 col_blue">
				欢迎使用访客智能管理系统
			</view>
		</view>
		
		
		<view class="input-group2">
			<view class="input-row2 borderr8 flex w90 borderall mauto">
				<uni-icons class="pL5 pT5" type="person" size="24"></uni-icons>
				<!-- <text class="title">手机号码：</text> -->
				<view class="flex w100">
					<m-input type="number" focus clearable v-model="captchaImg" placeholder="请输入手机号码"></m-input>
				</view>
			</view>			
			<view class="input-row2 borderr8 flex w90 borderall mauto">
				<uni-icons class="pL5 pT5" type="locked" size="24"></uni-icons>
				<!-- <text class="title" style="margin-top: 5px;">验证码：</text> -->
				<view class="flex ">
					<m-input type="number" name="" placeholder="请输入短信验证码" v-model="message_code" />
					<button class="sb" :class="{ active: !disableCodeBtn }" :disabled="disableCodeBtn" @tap="sendCode">{{ codeBtn.text }}</button>
				</view>
				
			</view>

			
		</view>
		
		<view class="btn-row w90 mauto" v-if="chphoneInfo.passwordchanger"><button type="primary" :disabled="disableBtn" :class="{ active1: !disableBtn }" @tap="register">{{chphoneInfo.submittext}}</button></view>
		<view class="btn-row w90 mauto" v-if="!chphoneInfo.passwordchanger"><button type="primary" :disabled="disableBtn" :class="{ active1: !disableBtn }" @tap="chbindphone">{{chphoneInfo.submittext}}</button></view>
		<view class="showtext overflow pT10 w90 mauto" v-if="chphoneInfo.passwordchanger">
			<view class="floatL">
				<!-- 温馨提示 -->
				<view class="tCenter footerlogo flex" v-if="chphoneInfo.passwordchanger">
					<img @click='gotest()' class="" src="../../static/img/logo.png" ></img>
					<view class="text">访客智能系统</view>
				</view>
			</view>
			<view class="floatR">
				 <label >
				  <checkbox :checked="argechecked" @click="checkBox()"  value="cb"  color="#007aff" style="transform:scale(0.7)" />
				 </label>
				 <span class="borderb1" @click="showtextfi()">同意用户协议</span>
			</view>
			
		</view>
		<!-- <view class="tRight w70 mauto pT10 " v-if="chphoneInfo.passwordchanger"  @click="testphone()">
		<span class="border_b">快速成为访客</span>	
		</view> -->
		
		<prompt style="color: #000000;" :visible.sync="promptVisible" placeholder="密码" defaultValue="" title='请输入密码'  @confirm="clickPromptConfirmBan" mainColor="#e74a39">
		</prompt>
		
		<view class="showwenziin " v-if="showwenzi">
			<view class="p15">
				<view class="" v-html="textinshow"></view>
			</view>			
		<view class="btn-row w70 mauto" ><button type="primary" @tap="yueduin()">已阅读</button></view>	
		</view>
		<view style="color: white;" v-if="!chphoneInfo.passwordchanger" class="btn-plusempty" hover-class="bottom-btn-hover" @click="addCustomer">
			返回
		</view>
	</view>
	
</template>

<script>
import mInput from '../../components/m-input.vue';
import vscode from '../../components/vs_code.vue';
import request from '../../common/vmeitime-http/requstx.js'; //引进requst方法
import {userbind,uCAPTCHA,userpassu,usermustbe} from '@/common/api/user.js'
import graceChecker from '../../common/graceChecker.js';
import md5 from '../../common/md5.js';
import { isEmpty } from '@/common/graceChecker.js';
import Prompt from '@/components/zz-prompt/index.vue' /*弹窗提示组件*/
export default {
	components: {
		mInput,
		Prompt,
		vscode
	},
	data() {
		return {
			showpassword:'2',
			choosecode:"",
			account: '',
			password: '',
			repassword: '',
			email: '',
			vs_code:"",
			captchaImg: '',
			message_code: '',
			seconds: 60,
			promptVisible:false,
			argechecked:true,
			showwenzi:false,
			textinshow:'',
			restype:'',
			codeBtn: {
				text: '获取验证码',
				waitingCode: false,
				count: this.seconds
			},
			chphoneInfo:{
				uinfo:{},
				passwordchanger:true,
				title:'更换手机号',
				submittext:'安全连接'
			
			},
		};
	},
	onLoad(options){
		if(options.type=='chphone'){
			this.chphoneInfo.submittext = '更换手机号';
			uni.setNavigationBarTitle({
			　　title:'更换手机号'
			})
			// uni.setNavigationBarTitle({ title: title })
			this.chphoneInfo.uinfo = JSON.parse(options.tmpuinfo)
			this.captchaImg = this.chphoneInfo.uinfo.mobile
			this.chphoneInfo.passwordchanger = false;
			
		}
		if(options.restype=='1'){
			this.restype=options.restype
		}
		
		if(options.register&&options.register=='font_p'){
			// this.restype='1'
			var restype= localStorage.getItem('restype');
			
			var localurl=localStorage.getItem('localurl');
			
			if(restype){
				this.restype=restype;
				sessionStorage.setItem("locationhref",localurl);
				sessionStorage.setItem("localurl",'');
				localStorage.setItem('restype','');
			}
				
		}
		
	},
	methods: {
		addCustomer(){
			console.log('点击添加按钮')
			// uni.navigateTo({
			//     url: '/pages/shouquan/shengfen?type='+this.banner.type
			// });
			 uni.navigateBack()
		},
		yueduin(){
			this.showwenzi=false;
			if(!this.argechecked){
				this.argechecked=true;
			}
			uni.setNavigationBarTitle({
			　　title:'验证登录'
			})
		},
		showtextfi(){
			usermustbe().then(res=>{
				console.log(res)
				if(res.data.data.mustbeinfo.val){
					this.textinshow=res.data.data.mustbeinfo.val;
				}
				
			})
			this.showwenzi=true;
			uni.setNavigationBarTitle({
			　　title:'用户使用协议'
			})
		},
		checkBox(){
			console.log(this.argechecked)
			if(this.argechecked){
				this.argechecked=false;	
			}else{
				this.argechecked=true;
			}
		},
		gotest(){
			this.promptVisible=true;
		},
		clickPromptConfirmBan(val) {
			if(!val){
				uni.showToast({
				    title: '请输入密码',
				    duration: 2000,
					icon:'none'
				});
				return 
			}else{
				userpassu({password:val}).then(res=>{
					if(res.data.code==200){
						uni.reLaunch({
							url: '/pages/shouquan/shoujitest'
						});
					}else{
						uni.showToast({
						    title: res.data.message,
						    duration: 2000,
							icon:'none'
						});
					}
				})
			}
		},
		// 显示与隐藏密码
		changpwds(){
			if(this.showpassword=='1'){
				this.showpassword='2';
			}else{
				this.showpassword='1';
			}
		},
		/*更换手机号*/
		chbindphone(){
			if (this.captchaImg.length < 11) {
				uni.showToast({
					icon: 'none',
					title: '请输入手机号'
				});
				return;
			}
			if (this.message_code.length < 6) {
				uni.showToast({
					icon: 'none',
					title: '请输入正确的验证码'
				});
				return;
			}
			
			userbind({
				mobile: this.captchaImg,
				message_code: this.message_code,
				type:'chphone'
			}).then(res=>{
				console.log(res)
				if(res.data.code == 200){	
					uni.showModal({
						title: '提示',
						content: '成功更换手机号:'+this.captchaImg,
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.reLaunch({
									url: '/pages/user/userMessage'
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}else{
					uni.showToast({
						icon: 'none',
						title:res.data.message
					});
				}
				
				
			})
			
			// request({
			// 	url: 'user/binding',
			// 	method: 'POST',
			// 	data: {
			// 		mobile: this.captchaImg,
			// 		// password: this.password,
			// 		// password_confirm: this.repassword,
			// 		message_code: this.message_code,
			// 		type:'chphone'
			// 	},
			// 	success: res => {
			// 		if (res.data.code == 400) {
			// 			uni.showToast({
			// 				title: res.data.message,
			// 				icon: 'none',
			// 				duration: 2000
			// 			});
			
			// 			if (res.data.message == 'token已过期') {
			// 				uni.hideLoading();
			// 				console.log(this.data.message);
			// 				uni.showToast({
			// 					title: this.data.message,
			// 					icon: 'none',
			// 					duration: 2000
			// 				});
			
			// 				window.location.href = this.weixinhttpurl+'/#/pages/shouquan/shouquan';
			// 			} else if (res.data.message == 'token不存在') {
			// 				uni.hideLoading();
			// 				console.log(this.data.message);
			// 				uni.showToast({
			// 					title: this.data.message,
			// 					icon: 'none',
			// 					duration: 2000
			// 				});
			
			// 				window.location.href = this.weixinhttpurl+'/#/pages/shouquan/shouquan';
			// 			}
			// 		} else if (res.data.message == '绑定成功') {
			// 			uni.reLaunch({
			// 				url: '/pages/user/userMessage'
			// 			});
			// 		}
			// 		console.log(res.data);
			// 	}
			// });
			
			
		},
		testphone(){
			if (this.captchaImg.length < 11) {
				uni.showToast({
					icon: 'none',
					title: '请输入手机号'
				});
				return;
			}
			if (this.message_code.length < 6) {
				uni.showToast({
					icon: 'none',
					title: '请输入正确的验证码'
				});
				return;
			}
			if (this.password.length < 6) {
				uni.showToast({
					icon: 'none',
					title: '密码最短为 6 个字符'
				});
				return;
			}
			if (this.repassword.length < 6) {
				uni.showToast({
					icon: 'none',
					title: '密码最短为 6 个字符'
				});
				return;
			}
			var sharecode=sessionStorage.getItem("sharecode");
			userbind({
				mobile: this.captchaImg,
				message_code: this.message_code,
				password: this.password,
				password_confirm: this.repassword,
				type:'testu',
				sharecode:sharecode,
			}).then(res=>{
				console.log(res)
				if(res.data.code == 200){
					uni.showToast({
						icon: 'none',
						title: '成功成为访客'
					});
					uni.reLaunch({
						url: '/pages/user/user'
					});
				}else{
					
					uni.showToast({
						icon: 'none',
						title: res.data.message
					});
				}
				
				
			})
			
		},
		
		register: function() {
			const that=this;
			/**
			 * 客户端对账号信息进行一些必要的校验。
			 * 实际开发中，根据业务需要进行处理，这里仅做示例。
			 */
			// uni.reLaunch({
			// 	url: '/pages/shouquan/shengfen'
			// });
			// return
			if (this.captchaImg.length < 11) {
				uni.showToast({
					icon: 'none',
					title: '请输入手机号'
				});
				return;
			}
			if (this.message_code.length < 6) {
				uni.showToast({
					icon: 'none',
					title: '请输入正确的验证码'
				});
				return;
			}
			// if (this.password.length < 6) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '密码最短为 6 个字符'
			// 	});
			// 	return;
			// }
			// if (this.repassword.length < 6) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '密码最短为 6 个字符'
			// 	});
			// 	return;
			// }
			// if (this.email.length < 3 || !~this.email.indexOf('@')) {
			//     uni.showToast({
			//         icon: 'none',
			//         title: '邮箱地址不合法'
			//     });
			//     return;
			// }

			const data = {
				account: this.account,
				password: this.password,
				email: this.email
			};
			var sharecode=sessionStorage.getItem("sharecode");
			request({
				url: 'user/binding',
				method: 'POST',
				data: {
					mobile: this.captchaImg,
					password: this.password,
					password_confirm: this.repassword,
					message_code: this.message_code,
					sharecode:sharecode,
				},
				success: res => {
					if (res.data.code == 400) {
						uni.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 2000
						});

						if (res.data.message == 'token已过期') {
							uni.hideLoading();
							console.log(this.data.message);
							uni.showToast({
								title: this.data.message,
								icon: 'none',
								duration: 2000
							});

							window.location.href = this.weixinhttpurl+'/#/pages/shouquan/shouquan';
						} else if (res.data.message == 'token不存在') {
							uni.hideLoading();
							console.log(this.data.message);
							uni.showToast({
								title: this.data.message,
								icon: 'none',
								duration: 2000
							});

							window.location.href = this.weixinhttpurl+'/#/pages/shouquan/shouquan';
						}
					} else if (res.data.message == '绑定成功') {
						
						if(this.restype=='1'){
							// sessionStorage.setItem("tokensession",'YES');
							// window.location.replace('/wap/#/pages/shouquan/renliansuccessful?type=yuyue')
							uni.reLaunch({
								url: "/pages/shouquan/shenfen?shouji="+that.captchaImg
							});
							
						}else{
							uni.reLaunch({
								url: '/pages/shouquan/shengfen'
							});
						}
						
					}
					console.log(res.data);
				}
			});
		},
		/*更换手机号*/
		
		sendCode: function() {
			if(!this.codeBtn.waitingCode){
				this.codeBtn.waitingCode = true;
				this.codeBtn.count = this.seconds;
				this.codeBtn.text = this.codeBtn.count + 's后重新发送';
				
				let countdown = setInterval(() => {
					this.codeBtn.count--;
					this.codeBtn.text = this.codeBtn.count + 's后重新发送';
					if (this.codeBtn.count < 0) {
						clearInterval(countdown);
						this.codeBtn.text = '重新发送';
						this.codeBtn.waitingCode = false;
					}
				}, 1000);
				
				const data = {
					username: this.captchaImg
				};
				/*请求验证码*/
				uCAPTCHA({
					mobile: this.captchaImg
				}).then(res=>{
					uni.showToast({
						title: res.data.message,
						icon: 'none',
						duration: 2000
					});
					
				})	
			}
			
		},
		gotoLogin: function() {
			uni.navigateTo({
				url: 'login'
			});
		}
	},
	computed: {
		disableCodeBtn: function() {
			   var vs_code=this.vs_code.toUpperCase();
			   var choosecode=this.choosecode.toUpperCase();
			 console.log('code',vs_code!=choosecode)
			   console.log('captchaImg',this.captchaImg.length < 11)
			    return  this.captchaImg.length < 11;
			 
			
		},
		disableBtn: function() {
			if(this.captchaImg.length == 11&& this.message_code!=''&&this.argechecked){
				return false;
			}else{
				return true;
			}
			 
			 
			
		}
	}
};
</script>

<style>
.shoujiclass .uni-input-input{font-size: 14px;}
.shoujiclass .uni-input-placeholder{font-size: 14px;}
.btn-plusempty{
		width: 110upx;
		height: 110upx;
		background: #007bfa;
		position: fixed;
		bottom: 50upx;
		right: 20upx;
		border-radius: 100%;
		overflow: hidden;
		text-align: center;
		line-height: 110upx;
	}
.back{
	width: 300upx;
	height: 150upx;
	color: white;
	background-color: #0066CC;
	margin: auto;
	line-height: 150upx;
	text-align: center;
	padding-top: 40upx;
	font-size: 30upx;
}
.content {
	display: flex;
	flex: 1;
	flex-direction: column;
	/* background-color: #efeff4; */
}
.sb {
	font-size: 14px;
	width: 124px;
	margin-right: 10px;
	/* 
	margin-top: 5px;
	margin-bottom: 5px; */
	text-align: center;
	line-height: 35px;
	height: 35px;
}
.input-group2 {
    background-color: #ffffff;
    /* margin-top: 15px; */
    position: relative;
}
.shoujiclass .input-row2{padding: 3px 0;margin-top: 20upx;line-height: 35px;height: 35px;}
.shoujiclass .input-row2 .title{font-size: 16px;    width: 28%;}
.shoujiclass .input-row2 .title {
    width: 22%;
    height: 27px;
    min-height: 27px;
    padding: 8px 0;
    padding-left: 16px;
    line-height: 27px;
}
.shoujiclass .btn-row{margin-top: 10px;padding: 5px;}
.border_b{border-bottom: 1px solid #555555;}
.footerlogo{align-items:center;}
.footerlogo img{width: 1.2rem;padding-right: 5px;}
.footerlogo .text{padding: 0; margin: 0;line-height: 10px;color: #999;}
.active{color: #409EFF;border: 1px solid #409EFF;}
.showwenziin{position: absolute;z-index: 9999;height: 100%;width: 100%;background-color: #fff;}
</style>
